{% include 'header.html' %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优惠游戏分布 - Steam游戏库</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="../static/js/echarts.js"></script>
</head>
<body class="bg-light">
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card shadow-lg border-0 rounded-lg">
                    <div class="card-body p-5">
                        <h1 class="card-title text-center mb-4 display-4 fw-bold text-primary">优惠游戏折扣分布</h1>
                        
                        <div id="discountChart" style="width: 100%; height: 400px;"></div>
                        
                        <div class="text-center mt-4">
                            <a href="/index" class="btn btn-outline-primary">返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        var chartDom = document.getElementById('discountChart');
        var myChart = echarts.init(chartDom);
        
        // 准备数据
        var discountedGames = {{ price_stats|tojson }};

        console.log(discountedGames)
        
        // 统计不同折扣比例的游戏数量
        var discountStats = {};
        discountedGames.forEach(function(game) {
            var discount = game['折扣'];
            if (discount && discount !== 'N/A') {
                if (discountStats[discount]) {
                    discountStats[discount]++;
                } else {
                    discountStats[discount] = 1;
                }
            }
        });

        var chartData = Object.keys(discountStats).map(function(key) {
            return { name: key, value: discountStats[key] };
        });
        
        // 按折扣比例排序
        chartData.sort(function(a, b) {
            var discountA = parseInt(a.name.replace('%', ''));
            var discountB = parseInt(b.name.replace('%', ''));
            return discountA - discountB;
        });

        var xAxisData = chartData.map(item => item.name);
        var seriesData = chartData.map(item => item.value);

         console.log("打折"+xAxisData+"\n数量"+seriesData)
        // 配置项
        var option = {
            title: {
                text: '优惠游戏折扣比例统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: xAxisData,
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                name: '游戏数量'
            },
            series: [{
                name: '游戏数量',
                data: seriesData,
                type: 'line', // 使用线性图
                smooth: true, // 使线条更平滑
                itemStyle: {
                    color: '#188df0'
                }
            }]
        };

        // 使用配置项显示图表
        myChart.setOption(option);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
